<template>
  <!-- 个人信息页面 -->
  <div>
    <div class="useravatar">
      <div class="avatar">
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="80" :src="circleUrl" />
          </div>
        </div>
      </div>
      <div class="editAvatar">
        <el-button
          type="text"
          @click="changeava"
        >修改头像</el-button>
      </div>
    </div>

    <el-dialog
      title="更改头像"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      
          <el-upload
        class="avatar-uploader"
        :action="uploadFileURL"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
        
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="editAvatar"
        >确认修改</el-button>
      </span>
    </el-dialog>

    <div class="content">
      <div class="info">
        <el-form ref="form" :model="Userform" label-width="80px">
          <el-form-item label="登陆用户">
            <el-input v-model="Userform.username" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户名字">
            <el-input v-model="Userform.realname" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户手机">
            <el-input v-model="Userform.telephone" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户性别">
            <el-input v-model="Userform.gender" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户角色">
            <el-input v-model="Userform.name" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户生日">
            <el-input v-model="Userform.birth" :disabled="true" />
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input
              v-model="Userform.registerTime"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="Userform.email" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户状态">
            <el-tag type="success">{{ Userform.status }}</el-tag>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="editInfo">
      <el-button type="text" @click="editUserInfo">修改个人信息</el-button>
    </div>
    <el-dialog
      title="修改个人资料"
      :visible.sync="dialogInfoVisible"
      width="30%"
      :before-close="handleInfoClose"
      @close="dialogClose"
    >
      <el-form ref="infoform" :model="Infoform" :rules="rules" label-width="80px">
        <el-form-item label="登陆用户">
          <el-input v-model="Infoform.username" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="Infoform.realname" />
        </el-form-item>
        <el-form-item label="姓别" prop="gender">
          <el-radio-group v-model="Infoform.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input v-model="Infoform.telephone" />
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="Infoform.email" />
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              v-model="Infoform.birth"
              type="date"
              placeholder="选择日期"
              value-format="timestamp"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from '@/utils/config'
import { get, post } from '@/utils/request'
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogInfoVisible: false,
      Userform: {
        username: '',
        realname: '',
        telephone: '',
        gender: '',
        birth: '',
        registerTime: '',
        email: '',
        status: ''
      },
      imageUrl: '',
      uploadFileURL,
      circleUrl: '',
      id:'',
      
      Infoform: {
        username: '',
        realname: '',
        telephone: '',
        gender: '',
        name: '',
        birth: '',

        email: ''

      },
      rules: {
        realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true }]
      },
      userFace:'',
    }
  },
  computed: {
    ...mapState('user', ['token'])
  },
  methods: {
    ...mapActions('user', ['getInfo']),
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      // 上传成功之后 更新productForm.photo的路径
      this.imageUrl  = showFileURL + res.data.id
      // this.Userform.userFace = showFileURL + res.data.id
    },
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isLt3M) {
        this.$message.error('上传轮播图图片大小不能超过 3MB!')
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    handleInfoClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    async getUserInfo() {
      const usertoken = this.token
      // console.log(usertoken);
      const res = await get('/user/info', { token: usertoken })
      // console.log(res);
      this.Userform = res.data
      this.circleUrl = res.data.userFace;
      this.id = res.data.id
      // console.log(this.id);
      // console.log(this.token);
    },
    onSubmit() {
      this.$refs['infoform'].validate(async(valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          const res = await post('/baseUser/saveOrUpdate', this.Infoform)
          // 给用户一个成功的提示
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据
            this.getUserInfo()
            // 调用关闭模态框的方法
            this.dialogClose()
          } else {
            this.$message.error(res.message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async editAvatar(){
      let data = {
        id:this.id,
        userface:this.imageUrl
      }
      // console.log(data);
      let res = await post('/baseUser/alterUserface',data)
      // console.log(res);
      if(res.status == 200){
        this.$message({
              message: res.message,
              type: 'success'
            })
        this.getUserInfo();
        this.dialogVisible = false
      }else {
            this.$message.error(res.message)
          }
    },
    dialogClose() {
      this.$refs['infoform'].resetFields()
      // 关闭模态框
      setTimeout(() => {
        this.dialogInfoVisible = false
      }, 200)
    },
    editUserInfo() {
      this.dialogInfoVisible = true
      this.Infoform = this.Userform
    },
    changeava(){
      this.dialogVisible = true;
      // this.avaForm.id = this.id
      // let data = {
      //   id:this.id,
      //   userFace:this.userFace
      // }

    }
  },
  created() {
    this.getUserInfo()
  },
  mounted() {}
}
</script>
<style scoped>
.useravatar {
  display: flex;
  flex: 1;
  height: 130px;
  justify-content: space-evenly;
  border-bottom: 2px solid #f4f4f4;
}
/* .block{
  margin-left: 50px;
} */
.editAvatar {
  margin-top: 50px;
}
label {
  margin: 5px;
}
.info {
  border-bottom: 2px solid #f4f4f4;
}
</style>
